<template>
  <div style="width:100vw;" class="patent-box">
    <div class="record-header">
      <!-- 返回按钮 -->
      <!-- <mt-header fixed title="专利及知识产权">
        <router-link to="/growup" slot="left">
          <mt-button class="back-butt" icon="back"></mt-button>
        </router-link>
      </mt-header>-->
    </div>
    <div @click="actionSheet" class="action-sheet">
      <p class="action-text">
        我的专利
        <span
          style="font-size:8px;position:relative;top:-2px;left:5px;"
          class="iconfont iconsanjiao"
        ></span>
      </p>
    </div>
    <div style="position:fixed;z-index:10;top:41px;">
      <div style="position:relative;">
        <ul class="action-ul" v-show="sheetVisible">
          <li @click="activeLi(0)" :class="{'active-li':actived}">全部</li>
          <li @click="activeLi(1)" :class="{'active-li':activeds}">发明专利</li>
          <li @click="activeLi(2)" :class="{'active-li':activedss}">外观专利</li>
          <li @click="activeLi(3)" :class="{'active-li':activedsss}">实用专利</li>
        </ul>
      </div>
    </div>
    <div v-show="sheetVisible" class="action-modal"></div>

    <div class="patent-body">
      <div class="page-tab-container">
        <div class="bscroll" ref="bscroll">
          <div class="bscroll-container">
            <div class="default-page-box" v-show="getPanentList.length == 0">
              <div class="default-page">
                <div class="default-text">哎呀，空空如也!</div>
              </div>
            </div>
            <div
              @click="goDetails(item.id)"
              v-for="(item,index) in getPanentList"
              :key="index"
              class="patent-card"
            >
              <div class="patent-content">
                <div style="margin-bottom:15px;" class="flex-row">
                  <div class="content-tip">{{item.name}}</div>
                  <div class="content-tip-icon">
                    <span class="iconfont iconbulb"></span>
                  </div>
                </div>
                <div class="flex-row">
                  <div class="content-tip">
                    <span class="iconfont iconxingming"></span>
                    {{item.userName}}
                  </div>
                  <div class="content-tip-date">{{item.licenseTime}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import { setText } from "../../untils/ddnavigate";
import { MessageBox } from 'mint-ui';
export default {
  data() {
    return {
      sheetVisible: false,
      actived: true,
      activeds: false,
      activedss: false,
      activedsss: false,
      getPanentList: []
    };
  },
  mounted() {
    let params = {
      type: 0
    };
    // MessageBox.alert('ceshi','asd')
    this.getPanentInfo(params);
    // better-scroll初始化
    this.$nextTick(() => {
      let bscrollDom = this.$refs.bscroll;
      this.aBScroll = new BScroll(bscrollDom, {
        click: true
      });
    });
    setText("专利及知识产权");
  },
  methods: {
    getPanentInfo(params) {
      this.$get("getPanentInfo", params).then(res => {
        if (res.success) {
          if (res.data) {
            res.data.map(function(item) {
              for (let k in item) {
                if (k == "licenseTime") {
                  item[k] = item[k].split(" ")[0];
                }
              }
            });
            this.getPanentList = res.data;
          }
          this.sheetVisible = false;
        }
      });
    },
    actionSheet() {
      this.sheetVisible = !this.sheetVisible;
    },
    activeLi(index) {
      let params = {
        type: 0
      };
      if (index == 0) {
        this.tabActive(true, false, false, false);
        params.type = 0;
        this.getPanentInfo(params);
      } else if (index == 1) {
        this.tabActive(false, true, false, false);
        params.type = 1;
        this.getPanentInfo(params);
      } else if (index == 2) {
        this.tabActive(false, false, true, false);
        params.type = 2;
        this.getPanentInfo(params);
      } else {
        this.tabActive(false, false, false, true);
        params.type = 3;
        this.getPanentInfo(params);
      }
    },
    tabActive(blean0, blean1, blean2, blean3) {
      this.actived = blean0;
      this.activeds = blean1;
      this.activedss = blean2;
      this.activedsss = blean3;
    },
    goDetails(id) {
      this.$router.push({ path: "/patentDetails", query: { id } });
    }
  }
};
</script>
 
<style lang="less" scoped>
@import url("~@/pagecss/patent.less");
.default-page-box {
  position: relative;
  height: 100vh;
}
.default-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("~@/assets/studyCenter/null.png") 50% 30% no-repeat;
  background-size: 352/75rem 215/75rem;
}
.default-text {
  left: 0;
  right: 0;
  position: absolute;
  top: 45%;
  text-align: center;
  font-size: 30/75rem;
  font-weight: 400;
  color: rgba(110, 176, 246, 0.7);
}
.bscroll-container {
  padding: 10/75rem 10/75rem 50px;
}
.item {
  display: inline-block;
}

.nav {
  padding: 10px;
}

.link {
  color: inherit;
  padding: 20px;
  display: block;
}
</style>
